<template>
	<div class="toDlist">
<div class="chu">
<div class="top">
	<div class="one">
		<span>出行人</span>
		<span>需要选择</span>
		<span>1</span>
		<span>位人</span>
	</div>
	<div class="two">
		<span>老人票</span>
		
			<span>
				<img :src="img" alt="">
				用户
			</span>
			<span>
				<img :src="img1" alt="">
				更多
			</span>
		
	</div>
</div>
<van-cell-group>
	<van-field  label="联系电话" placeholder="请输入手机号,用于接收信息" />
</van-cell-group>
</div>

<div class="fei">
<div class="top1">
<img :src="img2" alt="">
<span>查看更多权益</span>
<img :src="img3" alt="">
</div>
<div class="bottom">
	<span>开通立享55元优惠，本单满30减6元！</span>
	<span>¥8.00</span>
	<span>/年</span>
<van-checkbox v-model="checked">复选框</van-checkbox>
</div>
</div>

<div class="ben">
	<div>本单可享</div>
	<div class="you">
		<span>优惠</span>
		<span>暂无可使用优惠</span>
		<img :src="img4" alt="">
	</div>
</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			checked: true,
			img: "https://gw.alicdn.com/tfs/TB18Rsob2zO3e4jSZFxXXaP_FXa-56-56.png",
			img1: "https://gw.alicdn.com/imgextra/i3/O1CN01QrArLM1J9AlnUnHpU_!!6000000000985-2-tps-56-56.png",
			img2: "https://gw.alicdn.com/tfs/TB1x24DTEY1gK0jSZFMXXaWcVXa-139-28.png",
			img3: "https://gw.alicdn.com/tfs/TB1TRiXTGL7gK0jSZFBXXXZZpXa-26-26.png",
			img4:"https://gw.alicdn.com/imgextra/i2/O1CN01DN56iX28XUJUQkaaB_!!6000000007942-2-tps-54-30.png",
		};
	},
}
</script>

<style scoped>
.toDlist{
	box-sizing: border-box;
}
.chu{
	width: 7.2rem;
	height: 2.8rem;
	margin-left: .15rem;
	margin-top: .1rem;
	border-radius: .15rem;
	overflow: hidden;
	background-color: white;
}
.one {
	height: .9rem;
}
.one :nth-child(1){
	line-height: .9rem;
margin-left: .2rem;
font-size: 16px;
margin-right: .1rem;
font-weight: 700;
}
.one :nth-child(2) {
			color: rgb(171, 174, 179);
}
.one :nth-child(3) {
	color: red;
}
.one :nth-child(4) {
	color: rgb(171, 174, 179);
}
.two{
	height: 1rem;
	border-bottom: 1px solid #9194993e;
}
.two :nth-child(1){
	font-size: 16px;
		font-weight: 700;
		margin-left: .2rem;
		line-height: 1rem;
}
.two :nth-child(2) {
	display: block;
	width: 1.56rem;
	height: .7rem;
	border: 1px solid rgb(171, 174, 179);
	position: relative;
	top: -0.9rem;
	left: 3.65rem;
	line-height: .7rem;
	border-radius: .08rem;
font-size: 14px;
}
		.two :nth-child(2) img{
			width: .28rem;
			height: .28rem;
			margin-top: .2rem;
			margin-right: .1rem;
		}
.two :nth-child(3) {
	display: block;
	width: 1.56rem;
	height: .7rem;
	position: relative;
	top: -1.65rem;
	left: 5.4rem;
	line-height: .7rem;
font-size: 14px;
border-radius: .08rem;
		background-color: #fd0;
}
		.two :nth-child(3) img{
			width: .28rem;
			height: .28rem;
			margin-top: .2rem;
			margin-right: .1rem;
		}
		.fei{
			width: 7.2rem;
				height: 1.76rem;
				margin-left: .15rem;
				margin-top: .26rem;
				border-radius: .15rem;
				overflow: hidden;
				background-color: white;
		}
	.top1{
		height: .82rem;
		margin-left: .2rem;
		line-height: .82rem;
		border-bottom: 1px solid  #9194993e;
	}
	.top1 :nth-child(1){
			width: 1.4rem;
			height: .28rem;
			margin-top: .3rem;
		}
	.top1 :nth-child(2) {
		margin-left: 3.5rem;
		color: #919499;
	}
	.top1 :nth-child(3) {
		width: .28rem;
		height: .28rem;
		margin-top: .24rem;
		position: relative;
		left: .1rem;
	}
	.bottom{
		height: .94rem;
			margin-left: .2rem;
				line-height: .94rem;
	}
		.bottom :nth-child(1){
					color: rgb(255, 115, 0);
					margin-right: 1.2rem;
		}
		.bottom :nth-child(2){
					color: #ff401a;
					font-weight: 700;
					font-size: 14px;
		}
		.bottom :nth-child(4){
				position: relative;
				top: -35px;
				left: 320px;
		}
		.ben{
			width: 7.1rem;
			height: 1.78rem;
			margin-left: .2rem;
			margin-top: .26rem;
				border-radius: .15rem;
				overflow: hidden;
				background-color: white;
				display: flex;
			justify-content: space-around;
			flex-direction: column;
		}
		.ben :nth-child(1){
			margin-left: .2rem;
			font-size: 16px;
			font-weight: 700;
		}
			.you :nth-child(1) {
					margin-right: .2rem;
					margin-left: .2rem;
				}
		.you :nth-child(2){
			color: rgb(255, 80, 0);
				border-color: rgb(255, 240, 240);
		}
		.you :nth-child(3){
		width: .16rem;
		height: .08rem;
		margin-left: 4rem;
		margin-top: .2rem;
		}
</style>